<template>
  <div class="chart-wrapper">
    <!-- 下拉切换菜单 -->
    <select 
      class="type-select" 
      v-model="currentType" 
      @change="handleTypeChange"
    >
      <option value="commodity">商品销量趋势</option>
      <option value="map">地区销量趋势</option>
      <option value="seller">商家销量趋势</option>
    </select>
    <!-- 图表容器 -->
    <div ref="chart01" class="chart-1"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

// 复用原有颜色配置
const colorArr = ["rgb(250,105,0)", "rgb(254,33,30)", "rgb(22,239,214)", "rgb(44,109,252)", "rgb(11,167,44)"].reverse();

export default {
  data() {
    return {
      m: null, // 图表实例
      currentType: "commodity", // 默认显示商品趋势
      allData: null, // 存储所有接口数据
      o: {
        color: colorArr,
        title: {
          left: 'center',
          top: 'top',
          textStyle: { color: '#fff' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: { backgroundColor: '#6a7985' }
          }
        },
        legend: {
          data: [],
          icon: 'circle',
            top: 30,
          textStyle: { color: '#fff' },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          splitLine: { show: false }
        },
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            axisLine: { show: true }
          }
        ],
        series: []
      }
    };
  },
  methods: {
    async getData() {
      // 获取完整数据
      const { data } = await axios.get("http://124.223.9.151:9012/api/trend.json");
      this.allData = data;
      this.renderChart(); // 初始渲染
    },
    renderChart() {
      if (!this.allData) return;

      // 根据当前类型获取对应数据（commodity/map/seller）
      const typeData = this.allData[this.currentType];
      // 获取月份数据（通用）
      const monthData = this.allData.common.month;

      // 更新标题（使用对应类型的title）
      this.o.title.text = typeData.title;

      // 更新x轴月份
      this.o.xAxis.data = monthData;

      // 处理图例和系列数据
      this.o.legend.data = typeData.data.map(item => item.name);
      this.o.series = typeData.data.map((item, index) => ({
        name: item.name,
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colorArr[index] },
            { offset: 1, color: colorArr[index].replace(")", ",0)") } // 透明渐变
          ])
        },
        emphasis: { focus: 'series' },
        data: item.data
      }));

      // 渲染图表
      this.m.setOption(this.o);
    },
    handleTypeChange() {
      // 切换类型时重新渲染
      this.renderChart();
    }
  },
  mounted() {
    // 初始化图表实例
    this.m = echarts.init(this.$refs.chart01);
    this.m.setOption(this.o);
    this.getData();
  },
  beforeDestroy() {
    // 销毁实例
    if (this.m) this.m.dispose();
  }
};
</script>

<style scoped>
.chart-wrapper {
  position: relative; /* 用于下拉菜单定位 */
  width: 100%;
  height: 100%;
}

/* 下拉菜单样式（左上角） */
.type-select {
  position: absolute;
  left: 2px;
  top: 2px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 10; /* 确保在图表上方 */
}

.chart-1 {
  width: 100%;
  height: 100%;
}
</style>